<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入整个common页面 -->
    <div th:insert="common/common.html"></div>
</head>
<body>
<div id="toolbar">
    <input type="button" value="增加" onclick="toAddPage()">
</div>
<table id="table"></table>
</body>
</html>
<script>
    $('#table').bootstrapTable({
        url: '/carType/getCarTypeAllInfo',
        method: 'post',//请求方式
        contentType: "application/x-www-form-urlencoded",//如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。这时就需要在bootstrap-table的参数列表中显式设置：
        toolbar: '#toolbar',    //工具按钮用哪个容器
        striped: true,//是否显示行间隔色
        cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        //pagination: true,//是否显示分页（*）
        //sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
        //pageNumber: 1,//初始化加载第一页，默认第一页,并记录
        //pageSize: 5,//每页的记录行数（*）
        //pageList: [5, 10, 20],//可供选择的每页的行数（*）
        showColumns: true,//是否显示所有的列（选择显示的列）
        showRefresh: true,//是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        detailView: true,                  //是否显示父子表
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {
                pageSize: params.limit,                         //每页条数
                pageNum: (params.offset / params.limit) + 1,      /* 当前页数 */
                //条件查询 将数据传送到后台
                /*username:$("#username").val(),
                ubirthday:$("#ubirthday").val(),
                starTime:$("#starTime").val(),
                endTime:$("#endTime").val(),*/
            };
            return temp;
        },
        columns: [
            {
                checkbox: true,
                visible: true                  //是否显示复选框
            }, {
                field: 'tid',
                title: '类型ID'
            }, {
                field: 'tname',
                title: '类型名称'
            }, {
                title: '操作',
                formatter : function(value, row ,index){
                    return "<a class='btn btn-danger1' href='javascript:deleteInfo("+row.tid+")'><span class='glyphicon glyphicon-trash'></span></a><a class='btn btn-info1' href='javascript:updateInfo("+row.tid+")'><span class='glyphicon glyphicon-edit'></span></a>";
                }
            }
        ]
    });

    //刷新table   用户删除修改增加 关闭模态窗口时刷新table所用   也就是刷新上面的js代码
    function getData(){
        $('#table').bootstrapTable("refresh");
    }

    function toAddPage(){
        //BootstrapDialog模态框
        BootstrapDialog.show({
            title: '增加',
            size: BootstrapDialog.SIZE_SMALL,
            //加载远程页面
            message: $('<div></div>').load('/carType/toAddPage'),
            buttons: [{
                label: '取消',
                action: function (dialog) {
                    dialog.close();//关闭模态框
                }
            }, {
                label: '增加',
                action: function (dialog) {
                    $.ajax({
                        url:"/carType/addCarType",
                        type:"post",
                        dataType:"text",
                        data:$("#addForm").serialize(),
                        async:true,
                        success:function(data){
                            toastr.success("增加成功");
                            dialog.close(); //关闭模态框
                            getData();
                        },
                        error:function(){
                            toastr.error("增加系统错误");
                        }
                    })
                }
            }]
        });
    }


    function updateInfo(tid){
        //BootstrapDialog模态框
        BootstrapDialog.show({
            title: '修改',
            size: BootstrapDialog.SIZE_SMALL,
            //加载远程页面
            message: $('<div></div>').load('/carType/toUpdatePage?tid='+tid),
            buttons: [{
                label: '取消',
                action: function (dialog) {
                    dialog.close();//关闭模态框
                }
            }, {
                label: '修改',
                action: function (dialog) {
                    $.ajax({
                        url:"/carType/updateCarType",
                        type:"post",
                        dataType:"text",
                        data:$("#updateForm").serialize(),
                        async:true,
                        success:function(data){
                            toastr.success("修改成功");
                            dialog.close(); //关闭模态框
                            getData();
                        },
                        error:function(){
                            toastr.error("修改系统错误");
                        }
                    })
                }
            }]
        });
    }

    function deleteInfo(tid){
        //BootstrapDialog模态框
        BootstrapDialog.show({
            title: '删除',
            size: BootstrapDialog.SIZE_SMALL,
            //加载远程页面
            message: "确认删除",
            buttons: [{
                label: '取消',
                action: function (dialog) {
                    dialog.close();//关闭模态框
                }
            }, {
                label: '删除',
                action: function (dialog) {
                    $.ajax({
                        url:"/carType/deleteCarType",
                        type:"post",
                        dataType:"text",
                        data:{tid:tid},
                        async:true,
                        success:function(data){
                            toastr.success("删除成功");
                            dialog.close(); //关闭模态框
                            getData();
                        },
                        error:function(){
                            toastr.error("删除系统错误");
                        }
                    })
                }
            }]
        });
    }
</script>